<template>
  <div class="w1200 case_detail_page">
    <!-- 面包屑 开始 -->
    <div class="breadcrumb">
      <el-breadcrumb class="el_breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <!-- <el-breadcrumb-item>{{ $cookies.get("city") }}</el-breadcrumb-item> -->
        <el-breadcrumb-item>{{ $cookies.get("city") }}医生</el-breadcrumb-item>
        <el-breadcrumb-item>{{ linkDoctor.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>案例详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑 end -->

    <layout-box class="mt20 mb20">
      <template slot="left">
        <div class="case_content">
          <!-- 轮播图 开始 -->
          <UserCarousel class="case_carousel" :list="caseInfo.casePictures" />
          <!-- 轮播图 end -->

          <!-- 用户信息 开始 -->
          <div class="user_info">
            <div class="avatar">
              <li-image :src="$getLogo(linkDoctor.photo)" class="img" />
            </div>
            <div class="info">
              <h2 class="h2">{{ linkDoctor.name }}</h2>
              <h3 class="h3">
                <span>发布于：{{ caseInfo.createdDate }}</span>
                <span>{{ caseInfo.initReadCnt }}浏览</span>
              </h3>
            </div>
          </div>
          <!-- 用户信息 end -->

          <!-- 案例内容 开始 -->
          <div class="case_box">
            <h1 class="case_title">{{ caseInfo.caseTitle }}</h1>
            <div class="case_html" v-html="caseInfo.caseContent"></div>
          </div>
          <!-- 案例内容 end -->
        </div>
      </template>
      <template slot="right">
        <!-- 相关案例 开始 -->
        <div class="problem_box">
          <div class="head">相关案例</div>
          <div class="list_box">
            <UserCase
              class="user_case"
              v-for="(item, index) in caseList"
              :key="`case_${index}`"
              :info="item"
            />
          </div>
        </div>
        <!-- 相关案例 end -->
      </template>
    </layout-box>
  </div>
</template>
  <script>
import UserCarousel from "@/components/carousel/index.vue";
import UserCase from "@/components/case/index.vue";
import {
  GET_ORALCAVITYCASE_INFO,
  GET_ORALCAVITYCASE_SEARCH,
} from "@/http/interface";
export default {
  components: {
    UserCarousel,
    UserCase,
  },
  data() {
    return {
      caseInfo: {},
      linkDoctor: {},
      title: "",
      description: "",
      keywords: "",
      caseList: [],
    };
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.keywords,
        },
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/case`}
      ]
    };
  },
  async asyncData({ query, $axios }) {
    let _params = { id: query.id };
    let res = await $axios.get(GET_ORALCAVITYCASE_INFO, { params: _params });
    let caseInfo = res.data || {};

    let ces = await $axios.get(GET_ORALCAVITYCASE_SEARCH, {
      params: { pageSize: 4, pageNumber: 1 },
    });
    let cobj = ces.data || {};
    let caseList = cobj.list || [];

    return {
      caseInfo,
      caseList,
      linkDoctor: caseInfo.linkDoctor || {},
      title: caseInfo.seoTitle,
      keywords: caseInfo.seoKeywords,
      description: caseInfo.seoDescription,
    };
  },
  methods: {},
};
</script>
  <style lang="less" scoped>
@import "/assets/styles/index/doctor/case.less";
</style>